<!DOCTYPE html>
<html lang="cn">

<head>
<meta charset="UTF-8" />
<title>{$type['title']}-{$GLOBALS['S']['title']}</title>
<meta name="keywords" content="{$type['keywords']} " />
<meta name="description" content="{$type['description']} " />

   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
	<!-- Fav icon -->
    <link rel="shortcut icon" href="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}images/favicon.png">
	
	<!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" media="all" href="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}css/bootstrap.css" />
	
	<!-- Template CSS Files  -->
    <link rel="stylesheet" type="text/css" media="all" href="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}css/responsive.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}css/prettyPhoto.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}css/style.css" />

	<!-- Template JS Files -->
    <script type="text/javascript" src="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}js/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}js/modernizr.js"></script>
</head>

<body class="page-template page-template-page-Portfolio3Cols-filterable">
    <div id="motopress-main" class="main-holder">
{include="head.html"}
        <div class="content-holder clearfix">
            <div class="container">
                <div class="row">
                    <div class="span12">
                        <div class="row">
                            <div class="span12">
                                <section class="title-section">
                                    <h1 class="title-header">{$type['classname']} </h1>
                                    <ul class="breadcrumb breadcrumb__t">
                                        <li>当前位置：{$positions}</li>
                                    </ul>
                                </section>
                            </div>
                        </div>
						<!-- Main Content Starts -->
                        <div id="content">
                            <div>
                                <div class="filter-wrapper clearfix">
                                    <div class="pull-right">
                                        <strong>分类: </strong>
										<!-- Portfolio Categories -->
                                        <ul id="filters" class="filter nav nav-pills">
                                            <li class="active"><a href="#" data-count="13" data-filter>全部</a></li>
                                            {loop table="classtype" pid="$type["tid"]" mshow="1" as="v"}
                                            <li><a href="#" data-count="4" data-filter=".projects-category-{$type['tid']}">{$v['classname']}</a></li>
                                              {/loop}
                                        </ul>
                                        <div class="clear"></div>
                                    </div>
                                </div>
								<!-- Portfolio Section Starts -->
                                <ul id="portfolio-grid" class="filterable-portfolio thumbnails" data-cols="3cols"> 
                                {foreach $lists as $v}
									<!-- Portfolio Item : Image Format -->
                                    <li class="portfolio_item projects-category-{$type['tid']}">
                                        <div class="portfolio_item_holder">
                                            <figure class="thumbnail thumbnail__portfolio">
                                                <a class="image-wrap" href="{$GLOBALS['S']['jwcdnapi']}{$v['litpic']}" data-gal="prettyPhoto[image{$v['id']}]" title="{$v['title']}"><img src="{$GLOBALS['S']['jwcdnapi']}{$v['litpic']}" alt="{$v['title']}" /><span class="zoom-icon"></span></a>
                                                 {foreach fileall($v['zutu']) as $f}
                                                 <a class="image-wrap" href="{$GLOBALS['S']['jwcdnapi']}{$f[0]}" data-gal="prettyPhoto[image{$v['id']}]" title="{$f[1]}"><img src="{$GLOBALS['S']['jwcdnapi']}{$f[0]}" alt="{$f[1]}" /><span class="zoom-icon"></span></a>
    {/foreach}

                                            </figure>

                                            <div class="caption">
                                                <h3><a href="{$v['url']}">{fun newstr($v['title'],30)}</a></h3>
												<p class="excerpt">{fun newstr($v['description'],200)} </p>
                                                <p><a href="{$v['url']}" class="btn btn-primary">查看更多...</a></p>
                                            </div>
                                        </div>
                                    </li>
                               {/foreach}


                                </ul>
								<!-- Portfolio Section Ends -->
                            </div>
                        </div>
						<!-- Main Content Ends -->
                    </div>
                </div>
            </div>
        </div>

{include="bottom.html"}
            <script type="text/javascript" src="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}js/jquery.debouncedresize.js"></script>
        <script type="text/javascript" src="{$GLOBALS['S']['jwcdnapi']}{$GLOBALS['skin']}js/jquery.isotope.js"></script>
	<script>
		jQuery(document).ready(function($) {
			"use strict";
			var $container = jQuery('#portfolio-grid'),
				filters = {},
				items_count = jQuery(".portfolio_item").size();

			$container.imagesLoaded(function() {
				setColumnWidth();
				$container.isotope({
					itemSelector: '.portfolio_item',
					hiddenClass: 'portfolio_hidden',
					resizable: false,
					transformsEnabled: true,
					layoutMode: 'fitRows'
				});
			});

			function getNumColumns() {

				var $folioWrapper = jQuery('#portfolio-grid').data('cols');

				if ($folioWrapper == '1col') {
					var winWidth = jQuery("#portfolio-grid").width();
					var column = 1;
					return column;
				}

				if ($folioWrapper == '2cols') {
					var winWidth = jQuery("#portfolio-grid").width();
					var column = 2;
					if (winWidth < 380) column = 1;
					return column;
				} else if ($folioWrapper == '3cols') {
					var winWidth = jQuery("#portfolio-grid").width();
					var column = 3;
					if (winWidth < 380) column = 1;
					else if (winWidth >= 380 && winWidth < 788) column = 2;
					else if (winWidth >= 788 && winWidth < 1160) column = 3;
					else if (winWidth >= 1160) column = 3;
					return column;
				} else if ($folioWrapper == '4cols') {
					var winWidth = jQuery("#portfolio-grid").width();
					var column = 4;
					if (winWidth < 380) column = 1;
					else if (winWidth >= 380 && winWidth < 788) column = 2;
					else if (winWidth >= 788 && winWidth < 1130) column = 3;
					else if (winWidth >= 1130) column = 4;
					return column;
				}
			}

			function setColumnWidth() {
				var columns = getNumColumns();

				var containerWidth = jQuery("#portfolio-grid").width();
				var postWidth = containerWidth / columns;
				postWidth = Math.floor(postWidth);

				jQuery(".portfolio_item").each(function(index) {
					jQuery(this).css({
						"width": postWidth + "px"
					});
				});
			}

			function arrange() {
				setColumnWidth();
				$container.isotope('reLayout');
			}

			jQuery(window).on("debouncedresize", function(event) {
				arrange();
			});


			// Filter projects
			$('.filter a').on("click",(function() {
				var $this = $(this).parent('li');
				// don't proceed if already active
				if ($this.hasClass('active')) {
					return;
				}

				var $optionSet = $this.parents('.filter');
				// change active class
				$optionSet.find('.active').removeClass('active');
				$this.addClass('active');

				var selector = $(this).attr('data-filter');
				$container.isotope({
					filter: selector
				});

				var hiddenItems = 0,
					showenItems = 0;
				jQuery(".portfolio_item").each(function() {
					if (jQuery(this).hasClass('portfolio_hidden')) {
						hiddenItems++;
					};
				});
				return false;
			}));
		});
	</script>
</body>
</html>
